<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>${routeName}</title>

    <link rel="stylesheet" type="text/css" href="./statics/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="./statics/css/style.css">

    <script src="./statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="./statics/js/animate.js" type="text/javascript" charset="utf-8"></script>

</head>

<body style="">


<div class="items items-steps">
    <div class="center">
        <p class="main-title animated fadeInRight" ani-name="fadeInRight" ani-delay="0s"
           style="animation-delay: 0s;">${routeName}</p>
        <div class="items-block">
            <c:forEach items="${noods}" varStatus="s" var="r">
                <c:if test="${s.count%2==1}">
                    <div class="transition item animated rollInLeft" ani-name="rollInLeft" ani-delay=".15s"
                         style="animation-delay: 0.15s;">
                        <div class="img-block"><img src="./items-steps-officer.png" alt="img"></div>
                        <p class="item-title">${s.count}</p>
                        <p class="item-p">${r}</p>
                    </div>
                </c:if>

                <c:if test="${s.count%2==0}">
                    <div class="transition item even animated rollInLeft" ani-name="rollInLeft" ani-delay=".3s"
                         style="animation-delay: 0.3s;">
                        <div class="img-block"><img src="./items-steps-designer.png" alt="img"></div>
                        <p class="item-title">${s.count}</p>
                        <p class="item-p">${r}</p>
                    </div>
                </c:if>
            </c:forEach>
            <%--			<div class="transition item animated rollInLeft" ani-name="rollInLeft" ani-delay=".15s" style="animation-delay: 0.15s;">--%>
            <%--				<div class="img-block"> <img src="./items-steps-officer.png" alt="img"> </div>--%>
            <%--				<p class="item-title">商务代表</p>--%>
            <%--				<p class="item-p">售前咨询</p>--%>
            <%--				<p class="item-p">确认需求</p>--%>
            <%--				<p class="item-p">签订合同</p>--%>
            <%--				<p class="item-p">联络沟通</p>--%>
            <%--			</div>--%>
            <%--			<div class="transition item even animated rollInLeft" ani-name="rollInLeft" ani-delay=".3s" style="animation-delay: 0.3s;">--%>
            <%--				<div class="img-block"> <img src="./items-steps-designer.png" alt="img"> </div>--%>
            <%--				<p class="item-title">视觉设计师</p>--%>
            <%--				<p class="item-p">和您沟通细节</p>--%>
            <%--				<p class="item-p">向您收集资料</p>--%>
            <%--				<p class="item-p">提交设计样稿</p>--%>
            <%--				<p class="item-p">约5个工作日</p>--%>
            <%--			</div>--%>
            <%--			<div class="transition item animated rollInLeft" ani-name="rollInLeft" ani-delay=".45s" style="animation-delay: 0.45s;">--%>
            <%--				<div class="img-block"> <img src="./items-steps-manager.png" alt="img"> </div>--%>
            <%--				<p class="item-title">设计经理</p>--%>
            <%--				<p class="item-p">验收设计稿</p>--%>
            <%--			</div>--%>
            <%--			<div class="transition item even animated rollInLeft" ani-name="rollInLeft" ani-delay=".6s" style="animation-delay: 0.6s;">--%>
            <%--				<div class="img-block"> <img src="./items-steps-front.png" alt="img"> </div>--%>
            <%--				<p class="item-title">前端工程师</p>--%>
            <%--				<p class="item-p">制作页面</p>--%>
            <%--				<p class="item-p">开发功能</p>--%>
            <%--				<p class="item-p">实现效果</p>--%>
            <%--				<p class="item-p">10-15个工作日</p>--%>
            <%--			</div>--%>
            <%--			<div class="transition item item-col2 animated rollInLeft1 cur" ani-name="rollInLeft1" ani-delay=".75s" style="animation-delay: 0.75s;">--%>
            <%--				<div class="img-block"> <img src="./items-steps-engineer.png" alt="img"> </div>--%>
            <%--				<p class="item-title">质检工程师</p>--%>
            <%--				<div class="flex-row">--%>
            <%--					<div class="item-block">--%>
            <%--						<p class="item-p">客户需求核对</p>--%>
            <%--						<p class="item-p">功能测试</p>--%>
            <%--						<p class="item-p">展示效果验证</p>--%>
            <%--						<p class="item-p">网站性能测试</p>--%>
            <%--					</div>--%>
            <%--					<div class="item-block">--%>
            <%--						<p class="item-p">合规性检查</p>--%>
            <%--						<p class="item-p">技术规范检查</p>--%>
            <%--						<p class="item-p">第三方业务验证</p>--%>
            <%--						<p class="item-p">3-5个工作日</p>--%>
            <%--					</div>--%>
            <%--				</div>--%>
            <%--			</div>--%>
            <%--			<div class="transition item even animated rollInLeft" ani-name="rollInLeft" ani-delay=".9s" style="animation-delay: 0.9s;">--%>
            <%--				<div class="img-block"> <img src="./items-steps-officer.png" alt="img"> </div>--%>
            <%--				<p class="item-title">商务代表</p>--%>
            <%--				<p class="item-p">请您验收</p>--%>
            <%--				<p class="item-p">转运维部门</p>--%>
            <%--				<p class="item-p">转客服部门</p>--%>
            <%--			</div>--%>
            <%--			<div class="transition item animated rollInLeft" ani-name="rollInLeft" ani-delay="1.05s" style="animation-delay: 1.05s;">--%>
            <%--				<div class="img-block"> <img src="./items-steps-engineer.png" alt="img"> </div>--%>
            <%--				<p class="item-title">运维工程师</p>--%>
            <%--				<p class="item-p">网站上线</p>--%>
            <%--				<p class="item-p">网络、服务器保障</p>--%>
            <%--				<p class="item-p">平台升级、故障排除</p>--%>
            <%--				<p class="item-p">病毒、黑客防范</p>--%>
            <%--			</div>--%>
            <%--			<div class="transition item even animated rollInLeft" ani-name="rollInLeft" ani-delay="1.2s" style="animation-delay: 1.2s;">--%>
            <%--				<div class="img-block"> <img src="./items-steps-cc.png" alt="img"> </div>--%>
            <%--				<p class="item-title">客服专员</p>--%>
            <%--				<p class="item-p">解答疑问</p>--%>
            <%--				<p class="item-p">使用指导</p>--%>
            <%--				<p class="item-p">友情提示</p>--%>
            <%--				<p class="item-p">协助内容维护</p>--%>
            <%--			</div>--%>
            <div class="steps-block">
                <c:forEach items="${noods}" varStatus="s" var="r">
                    <div class="step"></div>
                </c:forEach>
                <%--				<div class="step"></div>--%>
                <%--				<div class="step"></div>--%>
                <%--				<div class="step"></div>--%>
                <%--				<div class="step"></div>--%>
                <%--				<div class="step cur"></div>--%>
                <%--				<div class="step"></div>--%>
                <%--				<div class="step"></div>--%>
                <%--				<div class="step"></div>--%>
            </div>
        </div>
    </div>
</div>


</body>
</html>